<template>
  <uni-popup @touchmove.stop.prevent="onTouchmoveFn" @change="onChange" :is-mask-click="maskClick" ref="popupRef"
             :safe-area="false" :type="type">
    <view class="x-popup" :style="{width: width, 'border-radius': `${radius}rpx`}">
      <view v-if="! $empty(title)" class="x-space-between">
        <view class="left">
          <slot name="left"></slot>
        </view>
        <view class="center">
          <view class="x-center title">{{title}}</view>
        </view>
        <view class="right">
          <slot name="right"></slot>
        </view>
      </view>
      <slot name="search"></slot>
      <scroll-view @scrolltolower="onScrolltolower" :style="{height: height == 'auto' ? '100%' : height + 'rpx'}" :scroll-y="true"
                   class="content">
        <slot></slot>
      </scroll-view>
      <view>
        <slot name="bottom"></slot>
      </view>
    </view>
  </uni-popup>
</template>

<script setup name="x-popup">
const props = defineProps({
  title: {
    default: "提示"
  },
  modelValue: {
    default: false
  },
  confirmClose: {
    default: true
  },
  width: {
    type: String,
    default: "100%"
  },
  height: {
    type: [Number, String],
    default: 750
  },
  type: {
    default: "bottom"
  },
  maskClick:{
    default: true
  },
  radius:{
    type: Number,
    default: 0
  }
});

const popupRef = ref(null);
let show = ref(false);
const emit = defineEmits(['update:modelValue', 'open', 'close'])
watch(show, (value) => {
  if (value) {
    popupRef.value.open();
    emit("open")
  } else {
    popupRef.value.close();
    emit("close")
  }
  emit('update:modelValue', value);
})

watch(() => props.modelValue, (value) => {
  show.value = value;
}, {immediate: true})

const onScrolltolower = (e) => {
  emit("scrolltolower", e);
}

const onChange = (e) => {
  show.value = e.show;
}
//解决蒙层下跟随滚动的问题
const onTouchmoveFn = (event) => {

}
</script>

<style scoped lang="less">
.x-popup {
  width: 100%;
  background-color: #fff;

  margin: 0 auto;

  .left {
    width: 30%;
    padding-left: 24rpx;
    box-sizing: border-box;
  }

  .center {
    width: 40%;
  }

  .right {
    width: 30%;
    padding-right: 24rpx;
    box-sizing: border-box;

    display: flex;
    flex-direction: row-reverse;
  }

  .title {
    width: 100%;
    text-align: center;
    font-size: 36rpx;
    font-weight: bold;
    height: 88rpx;
  }

  .content {
    width: 100%;
  }
}
</style>
